<template>
    <v-dialog
    v-model="showMe"
    width="600px"
    persistent
      >
        <v-card>
          <v-card-title>
            <h4>
              <v-text-field v-model=emp.name>

              </v-text-field>
            </h4>
          </v-card-title>
          <v-divider></v-divider>
          <v-layout row>
          <v-flex sm6>
          
          <v-list dense>
            
            <v-list-tile>
              <v-list-tile-content>性别:</v-list-tile-content>
              <v-list-tile-content class="align-end indigo--text accent-4">
                <v-select :items="[{gender:0,gender_text:'男'},{gender:1,gender_text:'女'}]" :value="emp.gender" item-text="gender_text" item-value="gender"></v-select>
              </v-list-tile-content>
            </v-list-tile>
            <v-list-tile>
              <v-list-tile-content>出生:</v-list-tile-content>
              <v-list-tile-content class="align-end">
                <v-menu
          :close-on-content-click="false"
          v-model="menu2"
          :nudge-right="40"
          lazy
          transition="scale-transition"
          offset-y
          full-width
          max-width="290px"
          min-width="290px"
        >
          <v-text-field
            slot="activator"
            v-model="emp.birth_date"
            prepend-icon="event"
            readonly
          ></v-text-field>
          <v-date-picker v-model="emp.birth_date" no-title @input="menu2 = false"></v-date-picker>
        </v-menu>
              </v-list-tile-content>
            </v-list-tile>
            <v-list-tile>
              <v-list-tile-content>所属部门:</v-list-tile-content>
              <v-list-tile-content class="align-end indigo--text accent-4">
                <v-select 
                  :items="['信息技术系','电气工程系','学院办公室']"
                  append-outer-icon="add"
                  v-model="emp.department"
                  >
                </v-select>
              </v-list-tile-content>
            </v-list-tile>
            <v-list-tile>
              <v-list-tile-content>工作电话:</v-list-tile-content>
              <v-list-tile-content class="align-end indigo--text accent-4">
                <v-text-field 
                  v-model="emp.work_phone">
                </v-text-field>
              </v-list-tile-content>
            </v-list-tile>
            <v-list-tile>
              <v-list-tile-content>移动电话:</v-list-tile-content>
              <v-list-tile-content class="align-end indigo--text accent-4">
                <v-text-field 
                  v-model="emp.mobile_phone" 
                  mask="### #### ####">
                </v-text-field>
              </v-list-tile-content>
            </v-list-tile>
            
            
            

          </v-list>
          </v-flex>
          <v-flex sm6>
          <v-list dense>
            
            <v-list-tile>
              <v-list-tile-content>职称:</v-list-tile-content>
              <v-list-tile-content class="align-end indigo--text accent-4">
                <v-combobox 
                  :items="['讲师','高级讲师']">
                </v-combobox>
              </v-list-tile-content>
            </v-list-tile>
            <v-list-tile>
              <v-list-tile-content>岗位:</v-list-tile-content>
              <v-list-tile-content class="align-end indigo--text accent-4">
                <v-combobox 
                  :items="['管理人员','专职教师']">
                </v-combobox>
              </v-list-tile-content>
            </v-list-tile>
            <v-list-tile>
              <v-list-tile-content>住址:</v-list-tile-content>
              <v-list-tile-content class="align-end indigo--text accent-4">
                <v-text-field></v-text-field>
              </v-list-tile-content>
            </v-list-tile>
            <v-list-tile>
              <v-list-tile-content>QQ:</v-list-tile-content>
              <v-list-tile-content class="align-end indigo--text accent-4">
                <v-text-field 
                  :rules="[rules.required,rules.QQ]">
                </v-text-field>
              </v-list-tile-content>
            </v-list-tile>
            <v-list-tile>
              <v-list-tile-content>电邮:</v-list-tile-content>
              <v-list-tile-content class="align-end indigo--text accent-4">
                <v-text-field
                  :rules="[rules.required, rules.email]"
                ></v-text-field>
              </v-list-tile-content>
            </v-list-tile>
            
            
            

          </v-list>

          </v-flex>
          </v-layout>

          <v-card-actions>
            <v-btn @click.stop="closeMe(false)">取消</v-btn>
            <v-btn @click.stop="closeMe(true)">保存</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
</template>

<script>
//import {mapGetters} from 'vuex'

export default {
    name: 'employee-edit-dialog',
    props: {
      employee: {
        type: Object,
        required: true
      },
      show: {
        type: Boolean,
        required: true
      }
    },

    watch: {
      show(v){
        this.showMe = v
      },
      employee: {
        handler: function(v){
          this.emp = Object.assign({},this.employee)
        },
        deep: true
      }
    },
    
    data(){
        return{
            showMe: false,
            emp: Object.assign({},this.employee),
            menu2: false,
            rules: {
              required: value => !!value || '必须填写.',
              QQ: value => {
                const pattern = /^[0-9]+$/
                return pattern.test(value) || '必须是数字'
              },
              email: value => {
                const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
                return pattern.test(value) || '无效的 e-mail.'
              }
          }
        }
    },
    methods: {
      closeMe(save){
        this.showMe = false;
        if(save){
          //eventBus.$emit('save-modified-employee',this.emp)
          this.$store.dispatch('modifyEmployee',this.emp)
        }
        eventBus.$emit('employee-edit-dialog-closed')
      }
    }

}
</script>

